<template>
    <div class="header">
        <el-row>
            <el-col :span="6" :offset="6">
                <!-- 收集item，将其传入app当中 --子传父emit -->
                <el-input v-model.trim="input" placeholder="请输入信息！" clearable />
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="danger" @click="addItem">点击收集</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, } from 'vue'


export default defineComponent({
    
    emit:['add'],
    setup(props,{emit}) {

        let input = ref<string>('')//input框初始值
        //点击添加数据按钮，完成子传父
        const addItem = ()=>{
            //使用条件判断，避免传进空串
            if(input.value){
                emit('add',input.value)//这里要注意，input是ref对象，是响应式数据，所以传的时候传的是input.value 避免一改全改的现象
            }
        }
        return {
            input,
            addItem
        }
    }
})
</script>

<style scoped>
.header {
    line-height: 70px;
}
</style>